<template>
  <div class="app-container">
    <el-button-group style="margin: 0px 0px 10px 0px">
      <el-button type="primary" icon="el-icon-plus" @click="dialogForm(1)"></el-button>
      <el-button type="primary" icon="el-icon-edit" @click="dialogForm(2)"></el-button>
      <el-button type="primary" icon="el-icon-delete" @click="deleteUser"></el-button>
    </el-button-group>
    <el-container style="height: 450px;">
      <el-container>
        <el-table
          v-loading="listLoading"
          style="width: 100%;"
          height="100%"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          @row-click='rowClick'
        >
          <el-table-column v-for="(column, key) in columns"
                           :prop="column.prop"
                           :label="column.label"
                           :width="column.width"
                           :fixed="column.fixed"
                           :formatter="formatter">
          </el-table-column>
        </el-table>
      </el-container>
    </el-container>
    <el-pagination
      background
      :layout="layout"
      :total="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form ref="depForm" :model="form" :inline="true" :rules="rules" class="demo-ruleForm">
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
                <el-input v-model="form.realName" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="手机号码" :label-width="formLabelWidth" prop="mobile">
                <el-input v-model="form.mobile" autocomplete="off" ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="生日" :label-width="formLabelWidth">
                <el-date-picker v-model="form.birthdays" type="date" placeholder="Pick a date" style="width: 100%;" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="depFormSub('depForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  // components: { Pagination },
  data() {
    return {
      columns: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      layout: 'sizes, prev, pager, next, jumper, ->, total',
      pageSizes: [10, 20, 30, 40, 50, 100],
      pageSize: 10,
      currentPage: 1,
      listModule: [],
      total: 0,
      list: [],
      listLoading: true,
      updateUser: [],
      addOrup: '',
      form: {
        id: '',
        realName: '',
        name: '',
        birthdays: '',
        mobile: ''
      },
      rules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 到 11 个字符', trigger: 'blur' }
        ]
      },
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize)
  },
  mounted: function() {
    this.getColumns()
  },
  methods: {
    rowClick(row, column, event) {
      // this.updateMoudle = row
      console.log(row)
    },
    getColumns() {
      var self = this
      this.$http.get('/dev-api/columns/table/by/WYGS')
        .then(res => {
          self.columns = res.data.data
        })
    },
    deleteUser() {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dialogForm(val) {
      this.form.realName = ''
      this.form.birthdays = ''
      this.form.mobile = ''
      this.form.name = ''
      if (val === 1) {
        this.form.addOrup = 1
        this.title = '添加用户'
        this.form.sort = 1
      } else {
        this.form.addOrup = 2
        if (this.updateUser.length <= 0) {
          alert('请先选择要修改的用户!')
          return
        }
        this.title = '修改用户'
        this.form.id = this.updateUser.id
        this.form.realName = this.updateUser.realName
        this.form.birthdays = this.updateUser.birthday
        this.form.mobile = this.updateUser.userAuthLocal.mobile
        this.form.name = this.updateUser.name
      }
      this.dialogFormVisible = true
    },
    depFormSub(val) {
      var self = this
      var qs = require('qs')
      console.log(this.form.addOrup === 2)
      if (this.form.addOrup === 2) {
        this.$http.post('/dev-api/company/update', qs.stringify(this.form))
          .then(res => {
            if (res.data.code === 20000) {
              self.dialogFormVisible = false
            }
          })
      } else {
        this.$http.post('/dev-api/company/save', qs.stringify(this.form))
          .then(res => {
            if (res.data.code === 20000) {
              self.dialogFormVisible = false
            }
          })
      }
      this.fetchData(this.currentPage, this.pageSize)
    },
    rowClick(row, column, event) {
      this.updateUser = row
    },
    fetchData: function(currentPage, Size) {
      var self = this
      this.$http.get('/dev-api/company/list?pageIndex=' + currentPage + '&pageSize=' + Size)
        .then(res => {
          self.list.pop()
          self.total = res.data.total
          self.list = res.data.data
          for (let i = 0; i < self.list.length; i++) {
            self.list[i].createTime = parseTime(self.list[i].createTime)
            self.list[i].modifyTime = parseTime(self.list[i].modifyTime)
            self.list[i].birthday = parseTime(self.list[i].birthday, '{y}-{m}-{d}')
          }
          self.listLoading = false
        })
    },
    currentChange(val) {
      this.currentPage = val
      this.fetchData(this.currentPage, this.pageSize)
    },
    sizeChange(val) {
      this.pageSize = val
      this.fetchData(this.currentPage, this.pageSize)
    }
  }
}
</script>
